<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GPTree - AI驱动的代码结构生成工具</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            background-color: #f8fafc;
            color: #1b1c1d;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #6b46c1 0%, #3182ce 100%);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .feature-icon {
            font-size: 2.5rem;
            background: linear-gradient(135deg, #6b46c1 0%, #3182ce 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .highlight {
            position: relative;
            z-index: 1;
        }
        .highlight::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 35%;
            background-color: rgba(104, 211, 145, 0.3);
            z-index: -1;
            transform: rotate(-1deg);
        }
        .mermaid-container {
            background-color: white;
            border-radius: 0.5rem;
            padding: 2rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }
    </style>
</head>
<body>
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20 px-4 md:px-0">
        <div class="container mx-auto max-w-6xl">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <h1 class="text-4xl md:text-5xl font-bold mb-4 font-serif">GPTree</h1>
                    <h2 class="text-2xl md:text-3xl font-medium mb-6 opacity-90">AI 驱动的代码结构生成工具</h2>
                    <p class="text-lg mb-8 leading-relaxed opacity-90">告别手动创建文件目录的繁琐，让AI为您生成清晰、规范的代码项目结构，加速开发流程。</p>
                    <div class="flex flex-wrap gap-4">
                        <a href="https://github.com/travisvn/gptree" target="_blank" class="bg-white text-indigo-700 hover:bg-gray-100 px-6 py-3 rounded-lg font-medium transition duration-300 flex items-center">
                            <i class="fab fa-github mr-2"></i> GitHub 仓库
                        </a>
                        <a href="#installation" class="bg-transparent border-2 border-white text-white hover:bg-white hover:text-indigo-700 px-6 py-3 rounded-lg font-medium transition duration-300">
                            快速开始
                        </a>
                    </div>
                </div>
                <div class="md:w-1/2 flex justify-center">
                    <div class="bg-white p-6 rounded-xl shadow-xl max-w-md w-full">
                        <div class="bg-gray-800 text-gray-200 rounded-t-lg p-3 flex items-center">
                            <div class="flex space-x-2 mr-3">
                                <div class="w-3 h-3 bg-red-500 rounded-full"></div>
                                <div class="w-3 h-3 bg-yellow-500 rounded-full"></div>
                                <div class="w-3 h-3 bg-green-500 rounded-full"></div>
                            </div>
                            <span class="text-sm">terminal</span>
                        </div>
                        <div class="bg-gray-900 text-gray-300 p-4 rounded-b-lg font-mono text-sm h-64 overflow-y-auto">
                            <p class="text-green-400">$ gptree "生成一个Python Flask项目结构，包含api、models和templates文件夹"</p>
                            <p class="text-gray-400 mt-2">正在使用AI生成项目结构...</p>
                            <p class="mt-4">my_flask_app/</p>
                            <p class="ml-4">├── api/</p>
                            <p class="ml-6">│   ├── __init__.py</p>
                            <p class="ml-6">│   └── routes.py</p>
                            <p class="ml-4">├── models/</p>
                            <p class="ml-6">│   ├── __init__.py</p>
                            <p class="ml-6">│   └── user.py</p>
                            <p class="ml-4">├── templates/</p>
                            <p class="ml-6">│   ├── base.html</p>
                            <p class="ml-6">│   └── index.html</p>
                            <p class="ml-4">├── config.py</p>
                            <p class="ml-4">├── requirements.txt</p>
                            <p class="ml-4">└── app.py</p>
                            <p class="text-green-400 mt-2">项目结构已生成！</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section class="py-16 px-4">
        <div class="container mx-auto max-w-6xl">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4 font-serif">核心功能</h2>
                <p class="text-xl text-gray-600 max-w-3xl mx-auto">GPTree结合AI智能与代码规范性，为开发者提供高效的项目结构解决方案</p>
            </div>
            
            <div class="grid md:grid-cols-2 gap-8">
                <div class="bg-white rounded-xl p-8 shadow-md card-hover">
                    <div class="flex items-start">
                        <div class="feature-icon mr-6">
                            <i class="fas fa-brain"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold mb-3">AI 驱动的结构生成</h3>
                            <p class="text-gray-600">根据简单的自然语言描述，智能推断并生成符合逻辑的项目文件和目录结构，摆脱固定模板限制。</p>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white rounded-xl p-8 shadow-md card-hover">
                    <div class="flex items-start">
                        <div class="feature-icon mr-6">
                            <i class="fas fa-code-branch"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold mb-3">现有代码库分析</h3>
                            <p class="text-gray-600">分析现有代码仓库的树形结构，并根据AI的建议进行优化或扩展，帮助理解复杂项目。</p>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white rounded-xl p-8 shadow-md card-hover">
                    <div class="flex items-start">
                        <div class="feature-icon mr-6">
                            <i class="fas fa-sliders-h"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold mb-3">自定义提示词支持</h3>
                            <p class="text-gray-600">提供详细的AI提示词，精细控制生成结构的复杂度和内容，满足特定项目需求。</p>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white rounded-xl p-8 shadow-md card-hover">
                    <div class="flex items-start">
                        <div class="feature-icon mr-6">
                            <i class="fas fa-terminal"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold mb-3">集成常见工具</h3>
                            <p class="text-gray-600">与tree命令和文件系统操作无缝结合，方便用户直接在终端进行操作，提高工作效率。</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Use Cases Section -->
    <section class="py-16 px-4 bg-gray-50">
        <div class="container mx-auto max-w-6xl">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4 font-serif">使用场景</h2>
                <p class="text-xl text-gray-600 max-w-3xl mx-auto">GPTree能在多种开发场景中显著提升您的工作效率</p>
            </div>
            
            <div class="grid md:grid-cols-3 gap-8">
                <div class="bg-white rounded-xl p-8 shadow-md card-hover text-center">
                    <div class="w-16 h-16 mx-auto mb-6 rounded-full bg-indigo-100 flex items-center justify-center">
                        <i class="fas fa-rocket text-indigo-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">新项目快速启动</h3>
                    <p class="text-gray-600">开始新项目时自动搭建基础骨架，无需手动创建大量文件和文件夹，让您专注于核心编码。</p>
                </div>
                
                <div class="bg-white rounded-xl p-8 shadow-md card-hover text-center">
                    <div class="w-16 h-16 mx-auto mb-6 rounded-full bg-blue-100 flex items-center justify-center">
                        <i class="fas fa-project-diagram text-blue-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">代码库理解与重构</h3>
                    <p class="text-gray-600">生成不熟悉代码库的清晰层级结构，快速掌握项目全貌，为理解或重构打下基础。</p>
                </div>
                
                <div class="bg-white rounded-xl p-8 shadow-md card-hover text-center">
                    <div class="w-16 h-16 mx-auto mb-6 rounded-full bg-green-100 flex items-center justify-center">
                        <i class="fas fa-users text-green-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">规范化团队项目</h3>
                    <p class="text-gray-600">确保团队新项目遵循统一代码结构规范，降低维护成本，提高协作效率。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Benefits Section -->
    <section class="py-16 px-4">
        <div class="container mx-auto max-w-6xl">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
                    <h2 class="text-3xl font-bold mb-6 font-serif">为什么选择GPTree？</h2>
                    <ul class="space-y-6">
                        <li class="flex items-start">
                            <div class="bg-indigo-100 w-8 h-8 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
                                <i class="fas fa-check text-indigo-600"></i>
                            </div>
                            <div>
                                <h3 class="font-bold text-lg mb-1">智能化生成</h3>
                                <p class="text-gray-600">AI根据复杂需求生成更具适应性和定制化的结构，超越固定模板限制</p>
                            </div>
                        </li>
                        <li class="flex items-start">
                            <div class="bg-indigo-100 w-8 h-8 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
                                <i class="fas fa-check text-indigo-600"></i>
                            </div>
                            <div>
                                <h3 class="font-bold text-lg mb-1">节省时间</h3>
                                <p class="text-gray-600">减少项目初始化和结构规划时间，让您更快进入编码阶段</p>
                            </div>
                        </li>
                        <li class="flex items-start">
                            <div class="bg-indigo-100 w-8 h-8 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
                                <i class="fas fa-check text-indigo-600"></i>
                            </div>
                            <div>
                                <h3 class="font-bold text-lg mb-1">提高一致性</h3>
                                <p class="text-gray-600">通过规范结构保持团队代码组织一致性，降低维护成本</p>
                            </div>
                        </li>
                        <li class="flex items-start">
                            <div class="bg-indigo-100 w-8 h-8 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
                                <i class="fas fa-check text-indigo-600"></i>
                            </div>
                            <div>
                                <h3 class="font-bold text-lg mb-1">开源可扩展</h3>
                                <p class="text-gray-600">完全开源的项目，具备透明性和可定制性，支持二次开发和集成</p>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="md:w-1/2">
                    <div class="mermaid-container">
                        <div class="mermaid">
                            graph TD
                            A[开发者需求] --> B(AI分析需求)
                            B --> C{创建新项目?}
                            C -->|是| D[生成项目结构]
                            C -->|否| E[分析现有代码]
                            D --> F[输出结构图]
                            E --> G[优化建议]
                            G --> F
                            F --> H[开发者使用]
                            H --> I[提高效率]
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Installation Section -->
    <section id="installation" class="py-16 px-4 bg-gray-900 text-white">
        <div class="container mx-auto max-w-6xl">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4 font-serif">快速开始</h2>
                <p class="text-xl text-gray-300 max-w-3xl mx-auto">只需几步即可开始使用GPTree提高您的工作效率</p>
            </div>
            
            <div class="grid md:grid-cols-3 gap-8">
                <div class="bg-gray-800 rounded-xl p-8 card-hover">
                    <div class="text-4xl text-indigo-400 mb-6">1</div>
                    <h3 class="text-xl font-bold mb-3">安装Python依赖</h3>
                    <p class="text-gray-300 mb-4">确保您的系统安装了Python，并通过pip安装gptree</p>
                    <div class="bg-gray-700 rounded-lg p-4">
                        <code class="text-sm font-mono text-green-300">pip install gptree</code>
                    </div>
                </div>
                
                <div class="bg-gray-800 rounded-xl p-8 card-hover">
                    <div class="text-4xl text-indigo-400 mb-6">2</div>
                    <h3 class="text-xl font-bold mb-3">配置API密钥</h3>
                    <p class="text-gray-300 mb-4">设置您的OpenAI API密钥作为环境变量</p>
                    <div class="bg-gray-700 rounded-lg p-4">
                        <code class="text-sm font-mono text-green-300">export OPENAI_API_KEY="your-api-key"</code>
                    </div>
                </div>
                
                <div class="bg-gray-800 rounded-xl p-8 card-hover">
                    <div class="text-4xl text-indigo-400 mb-6">3</div>
                    <h3 class="text-xl font-bold mb-3">生成项目结构</h3>
                    <p class="text-gray-300 mb-4">使用简单命令开始生成项目结构</p>
                    <div class="bg-gray-700 rounded-lg p-4">
                        <code class="text-sm font-mono text-green-300">gptree "生成一个Python Flask项目结构，包含api、models和templates文件夹"</code>
                    </div>
                </div>
            </div>
            
            <div class="mt-16 bg-indigo-900 bg-opacity-30 rounded-xl p-8 border border-indigo-700">
                <h3 class="text-xl font-bold mb-4 flex items-center">
                    <i class="fas fa-info-circle mr-2"></i> 使用成本说明
                </h3>
                <p class="text-gray-300 mb-4">GPTree是<span class="font-bold text-white">完全免费且开源</span>的工具，无需注册。</p>
                <p class="text-gray-300">然而，它需要用户<span class="font-bold text-white">配置OpenAI API密钥</span>（或其他LLM服务）才能运行，这意味着您可能会为API调用产生费用，具体取决于您的使用量和所选的LLM服务提供商。</p>
            </div>
        </div>
    </section>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });
        
        // 添加微交互效果
        document.querySelectorAll('.card-hover').forEach(card => {
            card.addEventListener('mouseenter', () => {
                card.style.transform = 'translateY(-5px)';
                card.style.boxShadow = '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)';
            });
            card.addEventListener('mouseleave', () => {
                card.style.transform = '';
                card.style.boxShadow = '';
            });
        });
    </script>
</body>
</html>